前端語言
作出互動的行為
將有用的值存儲在變數中。例如上述例子,我們要求輸入一個新名字,然後將該名字存在名為name
的變數裡。
對文本片段的操作(在程式裡稱作"字串")。在上述例子中,我們拿了字串 "Player 1: " 並將其與 name
變數連接來創造完整文本標籤,如:''Player 1: Chris"。
執行程式碼,回應網頁上發生的某些事件。在上述例子中,我們使用 [click](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/click_event)
事件,當按鈕被點擊時,便執行更新文本標籤的程式碼。
串接API
[DOM (文件物件模型) API](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model)
讓你能操作 HTML 和 CSS,像是建立、移除或改變 HTML 元素,或動態地將新樣式套用到頁面…等等。每當你看到彈出視窗,或有新的內容出現在畫面上,那就是 DOM 在動作。範例code
document.addEventListener("DOMContentLoaded", function() {
function createParagraph() {
let para = document.createElement('p');
para.textContent = 'You clicked the button!';
document.body.appendChild(para);
}
const buttons = document.querySelectorAll('button');
for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}
});
[Geolocations(地理位置) API](https://developer.mozilla.org/zh-TW/docs/Web/API/Geolocation)
可以取得位置資訊。這就是 Google Maps 取得你的位置並標示在地圖上所透過的方式。[Canvas](https://developer.mozilla.org/zh-TW/docs/Web/API/Canvas_API)
和 [WebGL](https://developer.mozilla.org/zh-TW/docs/Web/API/WebGL_API)
API 可以讓你在網頁創造 2D 動畫及 3D 圖像。人們正使用這些技術來作一些令人驚奇的事,參見 Chrome Experiments 及 webglsamples.[HTMLMediaElement](https://developer.mozilla.org/zh-TW/docs/Web/API/HTMLMediaElement)
和 [WebRTC](https://developer.mozilla.org/zh-TW/docs/Web/API/WebRTC_API)
一樣讓你可以使用多媒體做真正有趣的事情,例如在網頁中播放音樂或影片,或由網路攝影機頡取你的影像顯示在另一個人電腦裡(試試我們的簡單例子來了解)。前端架構
1.框架
2.測試
自動針對您的代碼運行測試,以確保它正確無誤,然後再繼續操作
3.部署
部署系統允許您發佈您的網站,可用於靜態和動態網站,並且通常傾向於與測試系統一起工作。
Netlify
是目前最流行的部署工具之一,但其他工具包括Vercel和GitHub Pages。
部署
讓我們總結一下工具鏈的所有部分:
代碼質量和維護由 ESLint 和 Prettier 執行。這些工具是通過(需要 ESLint 外掛程式,因為這個特定的專案使用 React)添加到專案中的。devDependenciesnpm install --dev eslint prettier eslint-plugin-react
程式碼品質工具讀取兩個設定檔:和 。.eslintrc.prettierrc
在開發過程中,我們使用 Parcel 來處理我們的依賴項。 在後台運行以監視更改並自動構建我們的原始程式碼。parcel src/index.html
通過將我們的更改推送到 GitHub(在“主”分支上)來處理部署,這會觸發 Netlify 上的構建和部署以發佈專案。對於我們的實例,此 URL 是 near-misses.netlify.com;您將擁有自己唯一的URL。
我們還有一個簡單的測試,如果NASA API源沒有為我們提供正確的數據格式,它會阻止網站的構建和部署。
認識package.json
描述專案的檔案,裡面包含你專案的各項資訊(名稱、描述、版本、作者、協議...)
{
"name": "crawler",// 專案名稱,全部小寫,不允許空格
"version": "0.0.1",// 須符合x.x.x的格式
"description": "FB & IG 爬蟲30天鐵人文章",//專案描述
"author": "dean lin",//作者名字
"dependencies": {},//在正式環境中會用到的pacakge
"devDependencies": {},//在開發、測試環境中會用到的pacakge
"scripts": {},//你可以撰寫支援的command作爲腳本
"main": "index.js",//入口檔案
"license": "MIT"//專案協議
}
CORS
前提:
瀏覽器的Same Origin Policy(同源政策)。瀏覽器基於安全性的考量,規定當你的網站要呼叫API時,需要是同一個來源。
如果是不同來源,瀏覽器依然會幫你發出request,但會把收到的response阻擋起來不給你的網站。
跨來源資源共用(Cross-Native Resource Sharing,簡稱 CORS)機制提供了網頁伺服器跨網域的存取控制,增加跨網域資料傳輸的安全性。現代瀏覽器支援在 API 容器(如 [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest)
或 [Fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API)
)中使用 CORS 以降低跨來源 HTTP 請求的風險。
簡單舉例:
跨來源資源共用 : 發出request的來源不同,但需要共用資源
可以把API request想像成大樓裡的一個個部門辦公室,有各自的門禁卡。資訊部的人不能進到行銷部,因為他們是不同來源。那如果最近資訊部跟行銷部密切合作,希望可以讓資訊部的人直接進到行銷部怎麼辦?這時候瀏覽器就是這個開啟門禁卡權限的管理員,要開啟門禁權限的方法就是CORS
同源(Same-Origin)? 跨來源(Cross-Origin)? 來源怎麼判定?
當兩個網址的 schema(protocol) + host + port 皆相同,就是同源(Same-Origin),只要有一者不同,就是跨來源(Cross-origin)
透過在API的response中加入新的http header讓瀏覽器透過這些資訊,來決定要不要放行這個response。
所有request發到api server不給response這樣的機制不會有什麼問題嗎?
如果web這邊發出了一個request要刪除某個資料,API server收到request,雖然因為跨來源問題在web端收不到response,但request還是收到了,於是就把資料刪除了!!
web server端發起的request其實可以分為兩個種類, “簡單請求(Simple request)”和“預檢請求(Preflight request)"。判斷的方式也蠻簡單的,只要沒有符合以下的條件,就算Preflight Request。
simple request的條件:
Preflight Request:
Preflight request 是一個瀏覽器在送出真正的request前,會先送出的輕量request(使用OPTIONS方法),只有header沒有body。
送出後Preflight request給API Server後,API Server會回應一個Preflight response,此時便會判斷上述的兩個資訊:methods和headers。若資訊顯示通過,則會告訴瀏覽器是否可以繼續往下執行真正的request,並確認真正的request是否有權限可以將response放行回web server,否則便會給予CORS相關的錯誤訊息。
解決方法:
[正規方法] 請後端設置放行通行證 - http header
[暫時方法] 使用CORS Proxy(跨域代理伺服器): 以第三方CORS Proxy - cors-anywhere為例
原理架構如下:
Browser ↔ CORS Proxy Server ↔ API
透過CORS Proxy Server的模式繞過 瀏覽器的跨域限制, 進而實踐存取API Server的response
您可以從 URL 檢索數據,而無需執行整頁刷新。這使網頁能夠僅更新頁面的一部分,而不會中斷使用者正在執行的操作。
API架構
非同步 JavaScript 及 XML(Asynchronous JavaScript and XML,AJAX)
Web 應用程式便能快速、即時更動介面及內容,不需要重新讀取整個網頁,讓程式更快回應使用者的操作。
Ajax是什麼?
AJAX 使用 [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest)
物件來與伺服器進行通訊
步驟:
Client to Server
當您在瀏覽器中輸入網址時(對於我們的類比,就像步行去商店一樣):
瀏覽器轉到DNS伺服器,並找到網站所在的伺服器的真實位址(您找到商店的位址)。
瀏覽器向伺服器發送HTTP
請求消息,要求它向用戶端發送網站的副本(您去商店訂購商品)。此消息以及客戶端和伺服器之間發送的所有其他數據使用 TCP/IP 透過您的互聯網連接發送。
如果伺服器批准用戶端的請求,伺服器會向客戶端發送「200 OK」消息,這意味著「當然,您可以查看該網站!這裡是“,然後開始將網站的文件作為一系列稱為數據包的小塊發送到瀏覽器(商店給你你的貨物,你把它們帶回你家)。
瀏覽器將小塊組裝成一個完整的網頁並顯示給您(貨物到達您家門口 - 新的閃亮的東西,太棒了!
HTTP
格式
與伺服器通信:
GET / HTTP/1.1
Host: www.opera.com
訊息意思:
GET
:我們希望對信息進行表示。/
:我們想要獲取的信息存儲在網站的根目錄中。HTTP/1.1HTTP
:我們正在使用1.1版本說話。Host:
:我正在嘗試訪問特定網站。www.opera.com
:網站名稱為 www.opera.com。伺服器應答:
HTTP/1.1 200 OK
Date: Wed, 23 Nov 2011 19:41:37 GMT
Server: Apache
Content-Type: text/html; charset=utf-8
Set-Cookie: language=none; path=/; domain=www.opera.com; expires=Thu, 25-Aug-2011 19:41:38 GMT
Set-Cookie: language=en; path=/; domain=.opera.com; expires=Sat, 20-Nov-2021 19:41:38 GMT
Vary: Accept-Encoding
Transfer-Encoding: chunked
訊息意思: